<template>
  <div class="maincs">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div
        class="main_white padding10"
        element-loading-text="加载中"
        v-loading="listLoading"
        style="min-height: 780px"
      >
        <!-- 左侧 -->
        <div class="left_box">
          <div class="left">
            <div class="top flex-middle">
              <img
                src="../../assets/images/guide_top.png"
                alt=""
                width="100%"
              />
            </div>
            <div class="bgColor">
              <div
                :class="[{ on: blurb.show }, 'left_modle blurb']"
                @click="showModle('blurb')"
              >
                <img src="../../assets/images/guide_blurb.jpg" width="100%" />
              </div>
              <div
                :class="[{ on: banner.show }, ' left_modle banner_box']"
                @click="showModle('banner')"
              >
                <img src="../../assets/images/guide_banner.jpg" width="100%" />
              </div>
            </div>
            <div
              :class="[{ on: infomation.show }, ' left_modle info']"
              @click="showModle('infomation')"
            >
              <img
                src="../../assets/images/guide_info.png"
                width="100%"
                style="margin-top: 0px"
              />
            </div>

            <!-- <div class="title" style="margin-top: 17px">精选商品</div> -->
            <div class="commodity">
              <div class="left_modle goods">
                <img src="../../assets/images/commodity.jpg" width="100%" />
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="right">
          <!-- 简介 -->
          <blurb :show="blurb.show" ref="refBlurb" @submit="submit"></blurb>
          <!-- 轮播图 -->
          <banner
            ref="refBanner"
            :show="banner.show"
            @changeUploadType="changeUploadType"
            @submit="submit"
          ></banner>
          <!-- 公告 -->
          <infomation
            :show="infomation.show"
            ref="refInfomation"
            @submit="submit"
          ></infomation>
        </div>
      </div>
    </div>
    <!-- 选择上传的类型 -->
    <el-dialog
      title="上传图片"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="upload_type_show"
      class="main_dialog_copy dialog400"
    >
      <div class="upload_type_container">
        <div @click="upload_type_show = false">
          <el-upload
            ref="upload"
            :action="upload_img"
            :data="{ store: 'shop' }"
            :headers="uploadHeader"
            :on-success="
              (response, file, fileList) => {
                uploadSuccess(response);
              }
            "
            :on-error="uploadErr"
          >
            <div class="upload_box flex-center">本地上传</div>
          </el-upload>
        </div>
        <!-- <div @click="upload_online">在线图库</div> -->
      </div>
      <!-- <div slot="footer">
        <el-button v-repeatClick>关 闭</el-button>
      </div> -->
    </el-dialog>
    <!-- 在线图库 -->
    <el-dialog
      title="在线图库"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="online_images_show"
      @close="online_images_close"
      class="main_dialog_copy dialog790 online_images_dialog"
    >
      <div class="online_images_container">
        <div class="header">
          <el-tabs v-model="activeName" @tab-click="handleClicktab">
            <el-tab-pane label="全部图片" name=""> </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in upload_data.category"
              :key="index"
              :label="item.name"
              :name="String(item.id)"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="container">
          <!-- 图片盒子 -->
          <div class="image_box">
            <div
              class="item"
              v-for="(item, index) in upload_data.list"
              :key="index"
              @mouseover="item.show = true"
              @mouseleave="item.show = false"
            >
              <el-tooltip effect="dark" :content="item.remark" placement="bottom">
                <div>
                  <div class="image">
                    <el-image fit="fill" :src="item.path" :title="item.remark">
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                  <div class="image_mask" v-if="item.show">
                    <div class="image_mask_main">
                      <span @click="handleUpload(item)">点击使用</span>
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="no_image" v-if="upload_data.list.length == 0">
            <img src="@/assets/images/no_data.png" alt="" />
          </div>
        </div>
        <div class="footer_page">
          <div class="main_page boxdq">
            <div class="main_page_r">
              <el-pagination
                :current-page="upload_current_sh.page"
                :page-sizes="[10, 30, 50, 100]"
                :page-size="upload_limit_sh"
                layout="total, sizes, prev, pager, next, jumper"
                :total="upload_totalCount_sh"
                @size-change="upload_changeLimit"
                @current-change="upload_changePage"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store";
import {
  goodsSelect_checkImage,
  getGroupIndex,
  setGroupSave,
} from "@/api/shop/shop";
import { puzzleImg, uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5, packApi } from "@/utils/public";
import { category } from "@/utils/index";

import blurb from "./components/guide/blurb";
import infomation from "./components/guide/infomation";
import banner from "./components/guide/banner";

export default {
  components: {
    blurb,
    infomation,
    banner,
  },
  data() {
    return {
      listLoading: false,
      // 控制右侧模块
      banner: { show: true },
      infomation: { show: false },
      blurb: { show: false },
      current: {
        id: "",
        index: [],
      },

      // 分类
      options: [],
      shield: false, //控制选择商品弹窗
      form_sh: {
        pid: "",
        category_id: [],
        name: "",
      },

      uploadHeader: {
        Authorization: store.getters.token,
      },
      puzzleImg,
      upload_img: uploadPath,

      /*  上传方式 */
      upload_type_show: false,
      online_images_show: false,
      activeName: "",
      upload_current_sh: {
        page: 1,
        per_page: 50,
      },
      upload_limit_sh: 50,
      upload_totalCount_sh: 1,
      upload_data: {
        category: [],
        list: [],
      },
      upload_form: {
        pid: 1,
        category_id: "",
      },
      upload_current: {
        ref: "refBanner",
      },
    };
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  mounted() {
    getGroupIndex(packApi()).then((res) => {
      if (res.errcode == 0) {
        // 通知子组件改变数据
        this.$refs.refBanner.getData(res.data.list.img_arr);
        this.$refs.refBlurb.getData(res.data.list.introduction);
        this.$refs.refInfomation.getData(res.data.list.notice);
      } else {
        this.$message.error(res.errmsg);
      }
    });
  },
  methods: {
    submit() {
      // 提交需要获取所有的数据传递到接口
      let data = {
        img_arr: this.$refs.refBanner.bannerInfo,
        introduction: this.$refs.refBlurb.introduction,
        notice: this.$refs.refInfomation.infomationInfo,
      };
      setGroupSave(packApi(data)).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //显示右侧弹窗
    showModle(type) {
      this.banner.show = false;
      this.infomation.show = false;
      this.blurb.show = false;
      this.$nextTick(() => {
        this[type].show = true;
      });
    },
    list_form() {
      let form_sh = JSON.parse(JSON.stringify(this.form_sh));
      form_sh.pid = form_sh.category_id[0] ? form_sh.category_id[0] : "";
      form_sh.category_id = category(form_sh.category_id);
      return form_sh;
    },

    /* ----在线图库---- */
    // 图片上传
    uploadSuccess(res) {
      let ref = this.upload_current.ref;
      this.$refs[ref].getUploadImg(res);
    },
    uploadErr() {
      this.$message.error("上传失败，请重试");
    },
    // 选择在线图库
    upload_online() {
      this.$nextTick(() => {
        this.goodsSelect_checkImage();
        this.online_images_show = true;
      });
    },
    online_images_close() {
      this.upload_type_show = false;
      this.$nextTick(() => {
        this.online_images_show = false;
        this.activeName = "";
        this.upload_form.pid = "";
        this.upload_form.category_id = "";
        this.upload_data.category = [];
        this.upload_data.list = [];
      });
    },
    upload_changeLimit(pageSize) {
      this.upload_current_sh.per_page = pageSize;
      this.goodsSelect_checkImage();
    },
    upload_changePage(page) {
      this.upload_current_sh.page = page;
      this.goodsSelect_checkImage();
    },
    // 选择上传图片方式
    changeUploadType(options) {
      this.upload_form.pid = options.pid;
      this.upload_current.ref = options.ref;
      this.upload_type_show = true;
    },
    // 加载列表
    goodsSelect_checkImage() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(
                apiUrl().name,
                this.list_form(),
                { group_id: this.id },
                this.current_sh
              )
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.upload_current_sh,
        this.upload_form
      );
      goodsSelect_checkImage(data).then((res) => {
        if (res.errcode == 0) {
          if (this.upload_data.category.length == 0) {
            this.upload_data.category = res.data.category;
          }
          res.data.list.data.map((e) => {
            e.show = false;
            e.path = this.avatar.domain + e.img;
          });
          this.upload_data.list = res.data.list.data;
          this.upload_totalCount_sh = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 切换导航栏
    handleClicktab(tab, event) {
      this.upload_form.category_id = this.activeName;
      this.goodsSelect_checkImage();
    },
    // 点击使用图片
    handleUpload(item) {
      this.$confirm("确定使用该图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let res = {
            code: 0,
            data: {
              path: item.img,
              src: item.path,
            },
          };
          let ref = this.upload_current.ref;
          this.$refs[ref].getUploadImg(res);
          this.online_images_close();
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-btw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-middle {
  display: flex;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list {
  display: none;
}
.maincs {
  font-size: 12px;
  .main_white {
    overflow: hidden;
    .address_container {
      display: flex;
      align-items: center;
    }
    .address_box {
      display: flex;
      align-items: center;
      padding: 10px 0;
      font-size: 14px;
      a {
        padding: 0 10px;
        color: #19b098;
        text-decoration: underline;
        min-width: 160px;
      }
      i {
        font-size: 16px;
        &:hover {
          color: #19b098;
        }
      }
    }
    .more_address {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .left_box {
      width: 375px;
      display: flex;
      flex-direction: column;
      float: left;

      // .submit{
      //   width:100px;
      //   padding:5px 15px;
      //   border-radius: 4px;
      //   background:#19b098;
      //   color:#fff;
      //   margin-top: 20px;
      // }
    }
    .left {
      width: 375px;
      min-height: 667px;
      border: 2px solid #eee;
      background: #f6f6f7;
      .left_modle {
        box-sizing: border-box;
        border: 1px solid transparent;
        &.on {
          border: 1px dashed #03a98e;
        }
      }
      .top {
        height: 50px;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
      }
      .bgColor{
        width: 345px;
        background: #ffffff;
        margin: 0 auto;
        padding-bottom: 10px;
      }
      .blurb {
        width: 345px;
      }
      .banner_box {
        width: 325px;
        margin: 0 auto;
        margin-top: 10px;
        img{
          display: block;
        }
      }
      .info {
        margin: 0 17px;
      }
      .part {
        // width: 100%;
        margin: 0 16px;
      }
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #191919;
        margin: 0 17px 20px;
      }
      .subject {
        margin: 0 17px;
      }
    }
    .right {
      float: left;
      margin-left: 20px;
      /deep/.modle {
        color: #797979;
        border: 1px solid #e7e7e7;
        background: #f5f7fa;
        padding: 10px 27px;
        .submit {
          width: 150px;
          padding: 10px 15px;
          border-radius: 4px;
          background: #19b098;
          color: #fff;
          margin-top: 20px;
        }
        .tit {
          color: #19b098;
          margin-bottom: 14px;
          &::before {
            content: "-";
            color: transparent;
            background: #19b098;
            width: 4px;
            height: 13px;
          }
          b {
            color: #000;
            font-size: 14px;
            margin-left: 6px;
            margin-right: 19px;
          }
        }
      }
      .tabbar {
        .setting {
          span {
            display: inline-block;
            width: 60%;
            margin-top: 10px;
          }
        }
      }
    }
  }
}

// 改动
.part_model {
  margin-top: 10px !important;
}
.special {
  background-color: #fff;
  margin: 10px 16px 0 16px;
  padding-bottom: 16px;
  .special_title {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    padding: 15px 18px 7px 18px;
  }
}
.commodity {
  background-color: #fff;
  margin: 10px 0 0 0;
}

.upload_type_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  & > div {
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    font-size: 14px;
    color: #ccc;
    border: 1px dashed #e6e6e6;
    cursor: pointer;
  }
}
.online_images_dialog {
  /deep/ .el-dialog__body {
    padding: 0 20px 10px;
  }
  /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
    box-shadow: none !important;
  }
  /deep/ .el-tabs__item.is-active {
    color: #19b098;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #19b098;
  }
  /deep/.el-tabs__item {
    &:hover {
      color: #19b098;
    }
  }
  /deep/.el-icon-arrow-left,
  /deep/.el-icon-arrow-right {
    font-size: 16px;
  }
}
.online_images_container {
  .header {
    min-height: 40px;
  }
  //中间部分
  .container {
    width: 100%;
    height: 400px;
    overflow: auto;
    .no_image {
      width: 100%;
      padding-top: 40px;
      text-align: center;
    }
    .image_box {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      .item {
        margin-right: 15px;
        margin-bottom: 15px;
        position: relative;
        max-width: 230px;
        min-width: 60px;
        border-radius: 8px;
        overflow: hidden;
        .el-image {
          width: 100%;
        }
        .image {
          font-size: 0;
        }
        .image_mask_main {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
  .footer_page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .main_page {
      margin-top: 10px;
      margin-left: 0px;
      margin-bottom: 0px;
    }
  }
}
.dropdown_item {
  display: flex;
  align-items: center;
  flex-direction: row;
  a {
    padding: 0 10px;
    color: #19b098;
    text-decoration: underline;
    min-width: 150px;
  }
  i {
    font-size: 16px;
    &:hover {
      color: #19b098;
    }
  }
}
</style>
